/**
 * Created by xlt on 2017/5/2.
 */
import React, {Component} from "react";
import cookie from "react-cookie";
class ShoppingCartItem extends Component {
    constructor(props) {
        super(props);
        console.log("_checkedAll--constructor" + props);
        this.state = {
            orderCount: this.props.item.buyNumber,
            is_checked: !this.props.item.isChecked
        }
        console.log("_checkedAll--ShoppingCartItem" + this.props.item.isChecked);
    }

    componentDidMount() {
        console.log("_checkedAll--componentDidMount");
    }

    componentWillUpdate(nextProps) {
        console.log("_checkedAll--componentWillUpdate11111--isChecked:" +
            nextProps.item.isChecked + ";" + this.state.is_checked);
        if (nextProps.item.isChecked == this.state.is_checked) {
            this.setState({
                orderCount: nextProps.item.buyNumber,
                is_checked: !this.state.is_checked
            });
            console.log("_checkedAll--componentWillUpdate--isChecked:" +
                nextProps.item.isChecked + ";" + this.state.is_checked);
        }

    }

    render() {
        const {item} = this.props;
        const imgUrl = item.image ? item.image.split(",")[0] : item.image;
        return ( <div>
                <li>
                    <div className="shopping-cart-goods-list">
                        <div className="shopping-cart-goods-checkbox">
                            <input type="checkbox" value="1" id="checkboxFourInput" checked={this.state.is_checked}/>
                            <label for="checkboxFourInput" onClick={this._updateCheckbox.bind(this)}></label>
                        </div>
                        <div className="shopping-cart-goods-img">
                            <img src={imgUrl}/>
                        </div>

                        <div className="shopping-cart-goods-info">
                            <div>
                                <h1 className="shopping-cart-goods-info-goods-name">
                                    {item.name}</h1>
                            </div>
                            <div>
                                <h1 className="shopping-cart-goods-info-goods-specification">
                                    {item.specificationName}</h1>
                            </div>
                            <div>
                                <input className="shopping-cart-goods-info-goods-amount" type="text" readOnly="true"
                                       value={item.price}/>
                                <input className="shopping-cart-goods-info-goods-number" type="text" readOnly="true"
                                       value={"X" + item.buyNumber}/>
                            </div>
                        </div>
                    </div>
                    <hr className="shopping-cart-goods-list-bottom-line"/>
                </li>
            </div>
        );
    }

    _reduce() {
        console.log("_reduce_reduce_reduce");
        if (Number(this.state.orderCount) > 1) {
            let buyNumber = Number(this.state.orderCount) - 1;
            this.setState({orderCount: buyNumber});
            this.updateBuyNumber(buyNumber);
        }
    }

    _add() {
        console.log("_add_add_add");
        let buyNumber = Number(this.state.orderCount) + 1;
        this.setState({orderCount: buyNumber});
        this.updateBuyNumber(buyNumber);
    }

    _updateCheckbox() {
        let isChecked = !this.state.is_checked;
        this.setState({is_checked: isChecked});
        console.log("_updateCheckbox");
        const {item} = this.props;
        const goodsNo = item.goodsNo;
        const categoryCode = item.categoryCode;
        const specificationNo = item.specificationNo;
        let shoppingCarItemList = cookie.load("shoppingCarItemList") || [];
        shoppingCarItemList.map((item) => {
            console.log("_checkedAll-->isChecked:" + item.isChecked + ";" + isChecked);
            if (item.categoryCode == categoryCode && item.goodsNo == goodsNo
                && item.specificationNo == specificationNo) {
                item.isChecked = !isChecked;
                console.log("_checkedAll-->" + item.isChecked);
            }
        });
        cookie.save("shoppingCarItemList", shoppingCarItemList);
        this.props.handleLoad();
    }

    updateBuyNumber(buyNumber) {
        let shoppingCarItemList = cookie.load("shoppingCarItemList") || [];
        const {item} = this.props;
        const goodsNo = item.goodsNo;
        const categoryCode = item.categoryCode;
        const specificationNo = item.specificationNo;
        shoppingCarItemList.map((item) => {
            if (item.categoryCode == categoryCode && item.goodsNo == goodsNo
                && item.specificationNo == specificationNo) {
                item.buyNumber = buyNumber;
            }
        });
        cookie.save("shoppingCarItemList", shoppingCarItemList);
        this.props.handleLoad();
    }
}
export default ShoppingCartItem;